<!-- 角色管理组件 -->
<template>
	<div id="rolemanagement">
		<template>
			<el-table :data="zNodes" border style="width: 100%">
				<el-table-column prop="id" label="角色编号" width="300">
				</el-table-column>
				<el-table-column prop="rolename" label="角色名字" width="300">
				</el-table-column>
				<el-table-column prop="description" label="描述" width="300">
				</el-table-column>
				<el-table-column width="370">
					<template slot="header" slot-scope="scope">
						<el-button icon="el-icon-circle-plus-outline" type="primary" plain size="mini" slot="reference"
							@click="childadd">打开角色添加页面</el-button>
						<addroleVue ref="refddssda"></addroleVue>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" @click="showupdaterole(scope.$index, scope.row)">资源管理</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						<updateroleVue ref="refupdate"></updateroleVue>
						<updaterolepermisVue ref="updaterolepermis"></updaterolepermisVue>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :page-size="20" style="margin-top: 20px;" background layout="prev, pager, next" :total="1000"
				@current-change="handleCurrentChange">
			</el-pagination>
		</template>
	</div>
</template>

<script>
	import addpermismanageVue from './addpermismanage.vue';
	import addroleVue from './addrole.vue';
	import updateroleVue from './updaterole.vue';
	import updaterolepermisVue from './updaterolepermis.vue';

	export default {
		name: "rolemanagement",
		data() {
			return {
				zNodes: [{
					rolename:"",
					description:""
				}],
				pageSize: "", //显示每页的条数
				total: "", //总条数
				pager: "", //当前页
				//绑定资源表单显示
				dialogFormVisibleAdd: false
			}
		},
		methods: {
			//修改
			handleEdit(index, row) {
				console.log(index, row);
				
				this.$refs.refupdate.refupdateper(true, row);
			},
			//删除
			handleDelete(index, row) {
				console.log(index, row);
				let roleid = row.id;
				console.log(index, row.id);
				this.axios.get("http://localhost:8080/role/delete1/" + roleid, {
					params: {},
					headers: {
						"token": "123"
					}
				}).then((res) => {
					alert(res.data.datamap.messsage);
					this.chaxun(1);
				}).catch(err => {
					console.log(err)
				});
			},
			childadd() {
				this.$refs.refddssda.sdfghjk(true);
			},
			showupdaterole() {
				this.$refs.updaterolepermis.updaterolepermis(true);
			},
			chaxun(page) {
				this.axios.get("http://localhost:8080/role/selectpage/" + page, {
					params: {},
					headers: {
						"token": "123"
					}
				}).then((res) => {
					this.total = res.data.datamap.chaxun.total; //总页数
					this.pageSize = res.data.datamap.chaxun.pageSize;
					this.pager = res.data.datamap.chaxun.pageNum;
					this.zNodes = res.data.datamap.chaxun.list;
				}).catch(err => {
					console.log(err)
				});
			},
			handleCurrentChange(val) {
				this.pager = val;
				this.chaxun(val);
			}
		},
		components: {
			addpermismanageVue,
			updateroleVue,
			updaterolepermisVue,
			addroleVue
		},
		mounted() {
			this.chaxun(1);
		}
	}
</script>

<style scoped>
</style>